
* {padding: 0; margin: 0;}
html {width: 100%; height: 100%; min-width: 1024px;}
body {width: 100%; height: 100%;}
img {border: 0;}

.left {float: left;}
.right {float: right;}

.shadow {box-shadow:2px 2px 3px #aaaaaa;}
.radius {border-radius: 10px;}

.icon {	
	width: 80px; 
	height: 80px; 
	text-align: center; 
	font-size: 13px; 
	font-weight: bold;
	text-decoration: none; 
	color: #fff; 
	text-shadow: 4px 3px 2px #000;			
}

.container {
	width: 100%; 
	min-height: 98%;
	background: url(../images/back.png) repeat; 
	background-size: cover;

	.side-bar {
		width: 8%; 
		list-style: none;
		
		.icon {
			margin: 16% 0;
			&:hover {.radius; .shadow; background-color: #6E946D;}
		}
		
		.icon-service {background: url(../images/icon.png) -18px -25px no-repeat;}
		.icon-product {background: url(../images/icon.png) -16px -125px no-repeat;}
		.icon-group {background: url(../images/icon.png) -16px -255px no-repeat;}
		.icon-connect {background: url(../images/icon.png) -14px -485px no-repeat;}
		.icon-campus {background: url(../images/icon.png) -16px -600px no-repeat;}
		.icon-where {background: url(../images/icon.png) -15px -710px no-repeat;}

	}

	.main-bar {
		width: 85%;

		.function {
			
			#service {
				width: 70%;
				position: absolute;
				z-index: 99;
				display: none;

				img {
					width: 100%;
					height: 100%;
					box-shadow:5px 5px 10px #000;
				}
			}

			#product {
				position: absolute;
				z-index: 99;
				display: none;

				.panel img {
					width: 920px;
					height: 550px;
				}
				.filmstrip img {
					width: 120px;
					height: 100px;
				}
				#pointer {display: none;}
			}
			
			#group {
				width: 960px;
				max-height: 690px;
				position: absolute;
				z-index: 99;
				background: #E4E3CD;
				margin: 10px auto;
				padding: 10px 10px;

				overflow: auto;
				display: none;
				box-shadow:5px 5px 10px #000;
				.radius;

				#main {
					padding: 0 5px;
					
					.items {
						width:216px;
						border:1px solid #dcdcdc;
						overflow:hidden;
						float:left;
						margin:10px 10px 5px 5px;
						background-color: #fff;
						box-shadow:5px 5px 10px #000;
						.radius;
					}
					.items .img {
						height:240px;
						overflow:hidden;
						position:relative;

						img {width: 216px; height: 240px;}
					}
					.items .desc {
						height:210px;
						width:186px;
						padding:15px;
						position:absolute;
						top:-300px;
						left:0px;
						color:#fff;
						background-image: url();
					}
					.items .title {
						text-align: center;
						border-top: 1px solid #dcdcdc;
						padding: 7px 14px;
					}
				}
			}

			#connect {
				position: absolute;
				top: 20%;
				left: 20%;
				z-index: 99;
				display: none;
				box-shadow:5px 5px 10px #000;

				#accordion {
					width: 400px;
					min-height: 300px;

					div {
						height: 130px;
						word-wrap: break-word;
					}
				}
			}

			#campus {
				position: absolute;
				top: 20%;
				left: 20%;
				z-index: 99;
				display: none;
				box-shadow:5px 5px 10px #000;

				#tabs {
					width: 600px;
					min-height: 400px;
				}
			}

			#where {
				position: absolute;
				margin-top: 10px;
				z-index: 99;
				display: block;
				box-shadow:5px 5px 10px #000;
			}


		}
		
		/* 书签样式 */
		.polaroid{
			margin-top: 25px;
			width:290px;
			padding:10px 10px 20px 10px;
			border:1px solid #BFBFBF;
			
			/* Add box-shadow */
			box-shadow:5px 5px 10px #000;
		}

		/* welcome字体 */
		@font-face {
			font-family: welcome;
			src: url('../font/Avqest.ttf');
		}
		
		#jump {
			top: -167px; 
			position: fixed; 
			left: 255px;
			z-index: 1;
			text-align: center;
			line-height: 35px;
			font-size: 50px;
			font-family: welcome;

			.welcome_left {
				background-color: #93f7f1;
				-ms-transform:rotate(7deg); /* IE 9 */
				-moz-transform:rotate(7deg); /* Firefox */
				-webkit-transform:rotate(7deg); /* Safari and Chrome */
				-o-transform:rotate(7deg); /* Opera */
				transform:rotate(7deg);
			}

			.welcome_middle {
				width:274px;
				padding:10px 20px 20px 10px;
				background-color: #E2EFE2;
				-ms-transform:rotate(-8deg); /* IE 9 */
				-moz-transform:rotate(-8deg); /* Firefox */
				-webkit-transform:rotate(-8deg); /* Safari and Chrome */
				-o-transform:rotate(-8deg); /* Opera */
				transform:rotate(-8deg);
			}

			.welcome_right {

				background-color: #d3f793;
				-ms-transform:rotate(8deg); /* IE 9 */
				-moz-transform:rotate(8deg); /* Firefox */
				-webkit-transform:rotate(8deg); /* Safari and Chrome */
				-o-transform:rotate(8deg); /* Opera */
				transform:rotate(8deg);
			}
		}
		
		.message {
				margin-top: 35%;
				margin-right: 5%;
				background: url(../images/message.jpg) no-repeat;
				background-size: cover;
				-ms-transform:rotate(6deg); /* IE 9 */
				-moz-transform:rotate(6deg); /* Firefox */
				-webkit-transform:rotate(6deg); /* Safari and Chrome */
				-o-transform:rotate(6deg); /* Opera */
				transform:rotate(6deg);
				
				/* 留言墙字体 */
				@font-face {
					font-family: message;
					src: url('../font/message.otf');
				}

				h1 {
					text-align: center; 
					color :#fff; 
					font-family: message; 
					font-weight: bolder; 
					font-size: 40px; 
					line-height: 50px;
				}
				textarea {
					width: 285px; 
					height: 140px;
					font-size: 20px;
					background: #E6E9CA;
					resize: none;
				}
			}

		


	}
	
	.bottom-bar {
		width: 100%; 
		height: 60px; 
		background: url(../images/bottom-bar.png) repeat-x;
		
		@keyframes start-animation{
			from {}
			to {background: url(../images/start-hot.png) -7px -3px no-repeat;}
		}
		@-moz-keyframes start-animation {
			from {}
			to {background: url(../images/start-hot.png) -7px -3px no-repeat;}
		}
		@-webkit-keyframes start-animation {
			from {}
			to {background: url(../images/start-hot.png) -7px -3px no-repeat;}
		}
		@-o-keyframes start-animation {
			from {}
			to {background: url(../images/start-hot.png) -7px -3px no-repeat;}
		}
		.start {
			width: 80px; 
			height: 60px;
			background: url(../images/start.png) 5px 2px no-repeat;

			&:hover {
				animation: start-animation 0.3s forwards;
				-moz-animation: start-animation 0.3s forwards;
				-webkit-animation: start-animation 0.3s forwards;
				-o-animation: start-animation 0.3s forwards;
			}
		}
	}

}




















